<template>
  <div class="page-filter">
    <div class="page-filter-left">
      <a-button type="primary" @click="addFilm">添加影片</a-button>
      <a-button @click="batchStatus(1)">启用</a-button>
      <a-button @click="batchStatus(2)">禁用</a-button>
      <a-button danger @click="deleteFilm">删除</a-button>
    </div>
    <div class="page-filter-right">
      <div class="show" v-if="!isHightFilter">
        <a-select
          v-model:value="filmListState.status"
          placeholder="全部状态"
          class="m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined">全部状态</a-select-option>
          <a-select-option :value="1">启用</a-select-option>
          <a-select-option :value="2">禁用</a-select-option>
        </a-select>
        <!--
          <a-select v-model:value="filmListState.categ_id" placeholder="全部分类" class="m-r-24">
          <a-select-option :value="undefined">全部分类</a-select-option>
          <a-select-option :value="1">喜剧片</a-select-option>
          <a-select-option :value="2">动作片</a-select-option>
        </a-select>
         -->
        <a-cascader
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          v-model:value="classList"
          change-on-select
          :allowClear="false"
          :field-names="{ label: 'name', value: 'id', children: 'subcateg' }"
          :options="atlasClassList"
          class="m-r-24"
          placeholder="全部分类"
          @change="handleSelectChange"
        >
          <template #suffixIcon>
            <a-tooltip placement="top" color="#fff">
              <template #title> 双击选中父级 </template>
              <div class="ellipsis-text">
                <question-circle-outlined />
              </div>
            </a-tooltip>
          </template>
        </a-cascader>
        <a-input
          v-model:value.trim="filmListState.video_id"
          :maxlength="19"
          :onkeyup="
            () => {
              if (filmListState.video_id) filmListState.video_id = filmListState.video_id.replace(/\D/g, '')
            }
          "
          :onafterpaste="
            () => {
              if (filmListState.video_id) filmListState.video_id = filmListState.video_id.replace(/\D/g, '')
            }
          "
          class="input-m-r-16"
          placeholder="请输入影片ID"
        />
        <a-input
          v-model:value.trim="filmListState.video_keyword"
          class="input-m-r-16"
          placeholder="请输入影片名称关键词"
        />
      </div>
      <div class="visible" v-else>
        <a-select
          v-model:value="filmListState.price_type"
          placeholder="收费状态"
          class="m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined">收费状态</a-select-option>
          <a-select-option :value="1">免费</a-select-option>
          <a-select-option :value="2">付费</a-select-option>
          <a-select-option :value="3">点播</a-select-option>
        </a-select>
        <a-select
          v-model:value="filmListState.area_id"
          placeholder="全部地区"
          class="m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined" v-if="areaList.length > 0">全部地区</a-select-option>
          <a-select-option :value="item.area_id" v-for="item in areaList" :key="item.area_id">{{
            item.area_name
          }}</a-select-option>
        </a-select>
        <a-select
          v-model:value="filmListState.video_year"
          placeholder="全部年代"
          class="m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined" v-show="yearList.length > 0">全部年代</a-select-option>
          <a-select-option :value="item" v-for="item in yearList" :key="item">{{ item }}</a-select-option>
        </a-select>
        <a-select
          v-model:value="filmListState.video_lang"
          placeholder="语言筛选"
          class="m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined" v-show="langList.length > 0">全部年代</a-select-option>
          <a-select-option :value="item" v-for="item in langList" :key="item">{{ item }}</a-select-option>
        </a-select>
        <a-select
          v-model:value="filmListState.publish_state"
          placeholder="连载筛选"
          class="m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined">连载筛选</a-select-option>
          <a-select-option :value="1">已完结</a-select-option>
          <a-select-option :value="2">连载中</a-select-option>
        </a-select>
        <a-select
          v-model:value="filmListState.play_url_state"
          placeholder="地址筛选"
          class="m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined">全部地址</a-select-option>
          <a-select-option :value="1">有播放地址</a-select-option>
          <a-select-option :value="2">空播放地址</a-select-option>
        </a-select>
      </div>
      <div class="flex items-end">
        <a-button type="primary" class="m-r-8" @click="handleSearch">搜索</a-button>
        <a-button class="btn-m-r-24" @click="handleReset">重置</a-button>
      </div>
      <div class="cursor-pointer blue-icon" v-if="!isHightFilter" @click="changeStatus">
        高级筛选
        <down-outlined />
      </div>
      <div class="cursor-pointer blue-icon" v-else @click="changeStatus">
        收起筛选
        <up-outlined />
      </div>
    </div>
  </div>
  <modal-view
    title="提示"
    v-model:visible="deleteVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="deleteConfirm"
    @cancel="deleteCancel"
  >
    <span>确定要删除该影片吗</span>
  </modal-view>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { filmListState, resetState, statusState } from '../state'
import ModalView from '@/components/components/modal/ModalView.vue'
import { useRouter } from 'vue-router'
import type { AreaData } from '@/types/site/area'
import { message } from 'ant-design-vue'
import { storage } from '@/utils/storage'

import apis from '@/apis'
const {
  site: { del_film, edit_status, classify_list, area_list, get_video_option }
} = apis
const atlasClassList = ref()
const router = useRouter()
const yearList = ref<string[]>([]) //年份数据
const langList = ref<string[]>([]) //获取语言
const classList = ref<string[]>([]) //分类数据
const siteId = storage.get('siteId')
const deleteVisible = ref(false)
const areaList = ref<AreaData[]>([])

const emit = defineEmits(['update-list'])
const addFilm = () => {
  router.push({ name: 'EditFilm' })
}
//获取分类接口
const getAtlasList = () => {
  classify_list({ site_id: siteId, categ_status: 1 }).then((res: any) => {
    if (res?.categ.length === 0) return []
    res?.categ.unshift({ id: undefined, name: '全部分类' })
    atlasClassList.value = res?.categ.map((item: any) => {
      for (var key in item) {
        if (Array.isArray(item[key]) && item[key].length === 0) {
          delete item[key]
        }
      }
      return item
    })
  })
}
//获取地区列表接口
const getAreaList = () => {
  area_list({ site_id: siteId }).then((res: any) => {
    areaList.value = res?.areas ?? []
    console.log('地区列表: ', areaList.value)
  })
}
//获取影片参数
const getVideoOption = () => {
  get_video_option({ site_id: siteId }).then((res: any) => {
    console.log('获取语言: ', res.lang)
    if (res.lang.trim().length > 0) {
      langList.value = res.lang.split(',')
    } else {
      langList.value = []
    }
    if (res.year.trim().length > 0) {
      yearList.value = res.year.split(',')
    } else {
      yearList.value = []
    }
  })
}
//影片分类change事件
const handleSelectChange = (value: any, selectedOptions: any) => {
  console.log('value[0]: ', value[0])
  console.log('value: ', value, selectedOptions)
  filmListState.categ_id = value.length > 0 && value[0] ? value[0] : undefined
  filmListState.subcateg_id = value.length > 0 && value[1] ? value[1] : undefined
  console.log(filmListState)
}
const deleteFilm = () => {
  if (!statusState.selectedRowKeys.length) return message.warning('请选择至少一部影片进行删除')
  console.log(statusState.selectedRowKeys)
  deleteVisible.value = true
}
/**
  删除影片对话框事件
 */
const deleteConfirm = (value: any) => {
  del_film({ video_id: statusState.selectedRowKeys }).then((res: any) => {
    message.success('批量删除成功')
    deleteVisible.value = value
    emit('update-list')
  })
}
const deleteCancel = () => {
  deleteVisible.value = false
  statusState.selectedRowKeys = []
}
//状态批量修改
const batchStatus = (checked: number) => {
  if (!statusState.selectedRowKeys.length) return message.warning('请选择至少一部影片进行编辑')
  const data = {
    type: 2,
    status: checked === 1 ? 1 : 2,
    id: statusState.selectedRowKeys
  }
  edit_status(data).then(() => {
    message.success(checked === 1 ? '启用成功' : '禁用成功')
    statusState.selectedRowKeys = []
    emit('update-list')
  })
}
const isHightFilter = ref(false)
const handleSearch = () => {
  console.log(filmListState)
  emit('update-list')
}
const changeStatus = () => {
  isHightFilter.value = !isHightFilter.value
}
const handleReset = () => {
  resetState()
  classList.value = []
  console.log(filmListState)
  emit('update-list')
}
onMounted(() => {
  getAtlasList()
  getAreaList()
  getVideoOption()
  statusState.selectedRowKeys = []
  resetState()
})
</script>

<style lang="less" scoped>
@common-color: #0083ff; // sea blue

.page-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  &-left {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 10px;

    .ant-btn:not(:last-child) {
      margin-right: 16px;
    }

    .ant-btn:last-child {
      background-color: rgba(254, 76, 77, 0.08);
      margin-right: 16px;
    }
  }

  &-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .m-r-24 {
      width: 134px;
      height: 32px;
      margin: 10px 24px 0 0;
    }

    .input-m-r-16 {
      width: 196px;
      height: 32px;
      margin: 10px 16px 0 0;
    }

    .btn-m-r-24 {
      margin: 10px 24px 0 0;
    }

    .m-r-8 {
      margin-right: 8px;
    }

    .blue-icon {
      color: @common-color;
      margin-top: 10px;
    }
  }
}
</style>
